<template>
    <div class="action">
        <a-popover
            content="copyContent"
            title="复制到..."
            trigger="click"
            :visible="copyVisible"
            @visibleChange="handleCopyVisible"
        >
            <span
                :class="[isTimelinesEmpty ? 'disabled' : 'copy']"
                style="margin-left: 0"
            >
                复制
            </span>
        </a-popover>
        <a-popconfirm
            title="确定删除吗"
            :disabled="trackIndex === undefined"
            @confirm="handleDeleteTrack"
            okText="确定"
            cancelText="取消"
        >
            <span :class="deleteClass"> 删除 </span>
        </a-popconfirm>
    </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { isEmpty } from "lodash";
import CopyContainer from "./CopyContainer.vue"; // Assuming you've converted this already
const props = defineProps({
    trackIndex: {
        type: Number,
        default: undefined,
    },
    day: {
        type: Object,
        required: true,
    },
    dayIndex: {
        type: Number,
        required: true,
    },
    getCopyDays: {
        type: Function,
        required: true,
    },
    handleDeleteTrack: {
        type: Function,
        required: true,
    },
});

const copyVisible = ref(false);

const handleCopySave = (copyIndexs) => {
    props.getCopyDays(props.day.timelines, copyIndexs);
    copyVisible.value = false;
};

const handleCopyVisible = () => {
    if (isEmpty(props.day.timelines)) return;
    copyVisible.value = !copyVisible.value;
};

const isTimelinesEmpty = computed(() => isEmpty(props.day.timelines));

const deleteClass = computed(() => {
    return isEmpty(props.day.timelines) || !props.day.delete
        ? "disabled"
        : "delete";
});

// const copyContent = (
//   <CopyContainer
//     :dayIndex="props.dayIndex"
//     :handleCopySave="handleCopySave"
//     :handleCopyVisible="handleCopyVisible"
//   />
// );
</script>

<style scoped>
/* Add your styles here if needed */
</style>
